<template>
  <div class="book-rack-wrapper">
    <div class="book-rack-button">
      <van-button type="danger" @click="onDivideGroupClick">
        分组按钮
      </van-button>
      <van-button type="primary" @click="onReplyGroup">回复分组</van-button>
    </div>

    <div class="book-rack-content">
      <!-- 如何渲染一个二维数组 [[],[],{}]-->
      <template v-for="(item, index) in bookRack">
        <!-- [{name: '', divideArr: []}, {}, {}] -->
        <template v-if="item.name">
          <div class="book-rack-box" :key="item.id">
            <h2>{{ item.name }}</h2>
            <template v-for="v in item.divideArr">
              <span :key="v.id">
                {{ v.bookName }}
              </span>
            </template>
          </div>
        </template>
        <template v-else>
          <BookRackItem
            @click.native="onBookItemClick(item, index)"
            :key="item.id"
            :item="item"
          ></BookRackItem>
        </template>
      </template>
    </div>
    <!-- 分组：弹出框 -->
    <van-dialog
      v-model="show"
      title="分组"
      show-cancel-button
      @confirm="confirm"
    >
      <van-field
        label="文本"
        placeholder="填写分组名字"
        v-model="divideNameValue"
      />
    </van-dialog>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import BookRackItem from '../components/BookRackItemCard.vue'
/**
 * 1. 点击的时候，弹出框出现
 * 2. 书写分组的名字
 * 3. 分组名字写好后，
 * 4. 点击确定按钮，获取分组名字，
 * 5. 将这个分组的名字，划分给分组数据
 */
export default {
  data() {
    return {
      show: false,
      // 分组的value
      divideNameValue: '',
      // 分组名字的数组
      divideNameArr: [],
    }
  },
  components: { BookRackItem },
  // keep-alive 之后，这个生命周期只走了一次
  created() {
    // this.COPY_BOOK_RACK()
  },
  activated() {
    this.COPY_BOOK_RACK()
  },
  computed: {
    ...mapState(['bookRack']),
  },
  methods: {
    ...mapMutations([
      'COPY_BOOK_RACK',
      'DIVIDE_SELECT_BOOK_ITEM',
      'DIVIDE_GROUP_BOOK_RACK',
      'REPLY_GROUP',
    ]),
    // 组件上添加的一个点击事件
    onBookItemClick(item, index) {
      this.DIVIDE_SELECT_BOOK_ITEM({ item, index })
    },
    // 调用分组
    onDivideGroupClick() {
      // 让用户选中书籍后再调用这个函数
      if (this.bookRack.filter((v) => v.check).length) {
        this.show = true
      } else {
        this.$toast('请先选中书籍')
      }
    },
    confirm() {
      // [ [] {}, {}]
      /**
       * [
       *  { name: '历史分组', divideArr: []  }, { id: '' }, {id: ''}
       * ]
       */
      if (this.divideNameValue) {
        // 确定分组
        this.DIVIDE_GROUP_BOOK_RACK({ name: this.divideNameValue })
      } else {
        this.$toast('请输入分组名称再提交')
      }
    },
    // 恢复分组
    onReplyGroup() {
      this.REPLY_GROUP()
    },
  },
}
</script>

<style lang="scss" scoped>
.book-rack-content {
  display: flex;
  flex-wrap: wrap;
}
.book-rack-box {
  width: 1.6rem;
  height: 2.5rem;
  margin: 5px;
  background: #eee;
}
</style>
